<template>
  <div class="container">
    <detail-banner :bannerImg='detailInfo.bannerImg' :imgs='detailInfo.gallaryImgs' ></detail-banner>
    <detail-header></detail-header>
    <detail-list :priceType="detailInfo.priceType"></detail-list>
    <div class="box"></div>
  </div>
</template>

<script>
import axios from "axios";
import DetailBanner from "./components/banner.vue";
import DetailHeader from "./components/header.vue";
import DetailList from "./components/list.vue";
export default {
  name: "Detail",
  components: {
    DetailBanner,
    DetailHeader,
    DetailList,
  },
  data() {
    return {
      detailInfo: {},
      // priceType:[]
    };
  },
  methods: {
    getDetailInfo() {
      axios
        .get("./api/detail.json", {
          params: {
            id: this.$route.params.id,
          },
        })
        .then(this.getDetailInfoSucc);
    },
    getDetailInfoSucc(res) {
      res = res.data;
      for(let item of res.data){
        if(item.id === this.$route.params.id){
          this.detailInfo = item
          break
        }
      }
    },
  },
  mounted() {
    
  },
  activated () {
    this.getDetailInfo();
  }

};
</script>

<style lang="stylus" scoped>
.box
  height 20rem
</style>